import React, { Component } from 'react';
import './xq.css'
import axios from 'axios'
import { Table, Select, Modal, Button, message, Input } from 'antd';
import qs from 'qs'
const columns = [
  {
    title: '商品编号',
    dataIndex: 'goodsId',
    key: 'goodsId',
    align: 'center'
  },
  {
    title: '商品名称',
    dataIndex: 'goodsName',
    key: 'goodsName',
    align: 'center'
  },
  {
    title: '单价',
    dataIndex: 'goodsRealPrice',
    key: 'goodsRealPrice',
    align: 'center',
    render: text => <span>{'￥' + text + '.00'}</span>
  },
  {
    title: '数量',
    key: 'goodsNumber',
    dataIndex: 'goodsNumber',
    align: 'center'
  },
  {
    title: '总价',
    key: 'total',
    dataIndex: 'total',
    align: 'center',
    render: text => <span>{'￥' + text + '.00'}</span>
  },
];
const { Option } = Select;
class Chuku extends Component {
  constructor(props) {
    super(props)
    this.state = {
      select: ['中通快递', '申通快递', '顺丰快递', '邮政'],
      xiala: '',
      xialavalue: '',
      visible: false,
      inputValue: ''
    }
  }
  componentDidMount() {
    console.log(this.props.location.query.record);
    console.log(this.props.location.query.res);
    // console.log(this.state.xiala);
    this.setState({
      xiala: this.state.select.map((item) => {
        return <Option key={item}>{item}</Option>
      })
    })
  }
  handleChange = (value) => {
    this.setState({
      xialavalue: value
    })
    console.log(`selected ${value}`);
  }
  //出库
  chuku() {
    if (this.state.xialavalue === '') {
      message.warning('请选择物流公司!')
    } else {
      axios.post('api/backstage/shop/OutOneOrderList',
        qs.stringify({ orderNumber: this.props.location.query.record.orderNumber, orderCourier: this.state.xialavalue }),
        { headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' } }).then(res => {
          console.log(res);
          if (res.data.msg == '出库成功！') {
            message.success('出库成功');
            setTimeout(() => {
              this.props.history.replace('/ddliebiao')
            }, 400)
          } else {
            message.error('出库失败');
          }
        });
    }
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  //取消
  quxiao() {
    this.setState({
      visible: false,
    });
  }
  //确定
  queding() {
    var arr = this.state.select;
    if (this.state.inputValue !== '') {
      arr.push(this.state.inputValue)
      this.setState({
        inputValue: '',
        visible: false,
        select: arr,
        xiala: this.state.select.map((item) => {
          return <Option key={item}>{item}</Option>
        })
      });

    } else {
      message.warning('请输入物流公司名称！');
    }

  }
  //返回
  huiqu() {
    this.props.history.go(-2)
  }
  //输入框输入
  inputChange = (e) => {
    this.setState({
      inputValue: e.target.value
    })
  }
  render() {
    const { visible, loading } = this.state;

    return (
      <div className='content'>
        <h1>订单出库</h1>
        <div className='hezi'>
          <div className='tt'>
            <h1>确认订单信息</h1>
            <div className='ttc'>
              <span className='ttsta'>订单号</span>
              <span className='ttstaa'>{this.props.location.query.record.orderNumber}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>下单时间</span>
              <span className='ttstaa'>{this.props.location.query.record.orderPayTime}</span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>订单金额</span>
              <span className='ttstaa'>
                {'￥' + Number(+ this.props.location.query.record.goodsNumber) * Number(this.props.location.query.record.goodsRealPrice)}
              </span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>收货地址</span>
              <span className='ttstaa'>
                <span className='aaa'>{this.props.location.query.res[0].addressReceiverName}</span>
                <span className='aaa'>{this.props.location.query.res[0].addressReceiverPhone}</span>
                <span className='aaa'>{this.props.location.query.res[0].addressName}</span>
              </span>
            </div>
            <div className='ttc'>
              <span className='ttsta'>买家留言</span>
              <span className='ttstaa'>{this.props.location.query.res[0].orderMessage === '' ? '发顺丰发顺丰发顺丰，重要的事情说三遍' : this.props.location.query.res[0].orderMessage}</span>
            </div>
          </div>
          <div className='tt'>
            <h1>订单商品</h1>
            <div className='ttc'>
              <Table
                columns={columns}
                dataSource={this.props.location.query.res}
                pagination={false} />
            </div>
          </div>
          <div className='tt'>
            <h1>配置物流服务</h1>
            <div className='ttc'>
              <span className='ttsta'>物流公司</span>
              <span className='ttstaa'>
                <Select size={'large'}
                  defaultValue="全部"
                  // value={this.state.type}
                  onChange={this.handleChange}
                  style={{ width: 200 }}>
                  {this.state.xiala}
                </Select>
              </span>
              <span className='ttstab'>  <Button
                onClick={this.showModal}
                type="dashed" block>
                +添加物流公司
                  </Button></span>
            </div>
            <div className='ttc'>
              <span className='ttstabtn'>
                <Button type="primary" onClick={this.chuku.bind(this)}>出库</Button>
                <Button onClick={this.huiqu.bind(this)}>返回</Button>
              </span>
            </div>

          </div>
        </div>
        <Modal
          visible={visible}
          title="添加物流公司"
          // onOk={this.handleOk}
          // onCancel={this.handleCancel}
          footer={[
            <Button type="primary" key='ok' onClick={this.queding.bind(this)}>确定</Button>,
            <Button key='qx' onClick={this.quxiao.bind(this)}>取消</Button>,
          ]}
        >
          <p>
            <Input placeholder="请输入物流公司名称"
              onInput={this.inputChange} />
          </p>

        </Modal>
      </div>
    );
  }
}

export default Chuku;